<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <!--指定挂载的位置-->
    <div id="root"></div>
    <script type="text/babel">
        // 创建一个React容器
        const root = ReactDOM.createRoot(document.querySelector("#root"));
        // class App extends React.Component{
        //     bookInfo={
        //         wuxia:{
        //           typeName:"武侠",
        //           bookList:[
        //               {
        //                   bookName:"天龙八部",
        //                   author:"金庸"
        //               },{
        //                   bookName: "水浒传",
        //                   author:"施耐庵"
        //               }
        //           ]
        //       },
        //       xuanhuan:{
        //           typeName:"玄幻",
        //           bookList: [
        //               {
        //                   bookName:"霸道总裁爱上我",
        //                   author:"愤怒的香蕉"
        //               },{
        //                   bookName: "庆余年",
        //                   author: "猫腻"
        //               }
        //           ]
        //       }
        //     }
        //     render(){
        //         return (
        //             <>
        //                 <div>
        //                     <h3>{this.bookInfo.wuxia.typeName}</h3>
        //                     {
        //                         this.bookInfo.wuxia.bookList.map((item,index)=>(<p key={index}>作者:{item.author} 作品:{item.bookName}</p>))
                                
        //                     }
                            
        //                 </div>
        //                 <br/>
        //                     <h3>{this.bookInfo.xuanhuan.typeName}</h3>
        //                     {
        //                         this.bookInfo.xuanhuan.bookList.map((item,index)=>(<p key={index}>作者:{item.author} 作品:{item.bookName}</p>))
        //                     }
        //             </>
        //         )
        //     }
        // }
        // root.render(<App/>)

         // 2- 使用解构赋值
        //   class App extends React.Component{
        //   bookInfo = {
        //       wuxia:{
        //           typeName:"武侠",
        //           bookList:[
        //               {
        //                   bookName:"天龙八部",
        //                   author:"金庸"
        //               },{
        //                   bookName: "水浒传",
        //                   author:"施耐庵"
        //               }
        //           ]
        //       },
        //       xuanhuan:{
        //           typeName:"玄幻",
        //           bookList: [
        //               {
        //                   bookName:"霸道总裁爱上我",
        //                   author:"愤怒的香蕉"
        //               },{
        //                   bookName: "庆余年",
        //                   author: "猫腻"
        //               }
        //           ]
        //       }
        //   }
        //   render(){
        //     const {wuxia,xuanhuan}=this.bookInfo;
        //     return (
        //         <>
        //             <div>
        //                 <h3>{wuxia.typeName}</h3>
        //                 {
        //                     wuxia.bookList.map((item,index)=>(<p key={index}>作者:{item.author} 作品:{item.bookName}</p>))
        //                 }
        //             </div>
        //             <br/>
        //             <div>
        //                 <h3>{xuanhuan.typeName}</h3>
        //                 {
        //                     xuanhuan.bookList.map((item,index)=>(<p key={index}>作者:{item.author} 作品:{item.bookName}</p>))
        //                 }    
        //             </div>

        //         </>
        //     )
        // }
        // }
        // root.render(<App/>)

      // 3.组件传值
      class App extends React.Component {
        bookInfo={
            wuxia:{
                  typeName:"武侠",
                  bookList:[
                      {
                          bookName:"天龙八部",
                          author:"金庸"
                      },{
                          bookName: "水浒传",
                          author:"施耐庵"
                      }
                  ]
              },
              xuanhuan:{
                  typeName:"玄幻",
                  bookList: [
                      {
                          bookName:"霸道总裁爱上我",
                          author:"愤怒的香蕉"
                      },{
                          bookName: "庆余年",
                          author: "猫腻"
                      }
                  ]
              }
        }
        render(){
            const {wuxia,xuanhuan}=this.bookInfo;
            return(
                <>
                    <Book bookInfo={wuxia}/>
                    <hr/>
                    <Book bookInfo={xuanhuan}/>
                </>
            )
        }
    }
    class Book extends React.Component{
        render(){
            const {typeName,bookList}=this.props.bookInfo;
            return(
                <>
                    <div>
                        <h3>{typeName}</h3>  
                        {
                            bookList.map((item,index)=>(<p key={index}>作者:{item.author} 作品:{item.bookName}</p>))
                        }  
                    </div>
                </>
            )
        }
    }
    root.render(<App/>)
    </script>
</body>

</html>